import React, {memo, useEffect, useLayoutEffect, useState} from 'react';

/**
 * 1. useEffect 会在渲染的内容更新到DOM上后执行，不会阻塞DOM的更新
 * 2. useLayoutEffect 会在渲染的内容更新到DOM上之前执行，会阻塞DOM的更新
 */
const App = memo(() => {
  const [count, setCount] = useState(0)
  useEffect(() => {
    //3.useEffect执行
    console.log("useEffect")
  })

  useLayoutEffect(() => {
    //2.useLayoutEffect执行
    console.log("useLayoutEffect")
  })

  //1.render执行
  console.log("App render")

  return (
      <div>
        <h2>当前计数:{count}</h2>
        <button onClick={() => setCount(count + 1)}>+1</button>
      </div>
  );
});

export default App;